<!-- 员工条码建档：蹇泽阳 -->
<template>
  <div class="app-container">
    <div v-show="false" id="report" class="print">
      <div v-for="item in printArr" :key="item.workerId">
        <p style="text-align: center">{{ item.line }}</p>
        <div class="List">
          <div class="left">
            <img :src="item.img" alt="" />
          </div>
          <div class="right">
            <p>{{ item.workerName }}</p>
            <p>{{ item.workerId }}</p>
          </div>
        </div>
        <div class="page-break"></div>
      </div>
    </div>

    <Find :OriginalFilter="{ static: true }" :formList="formList" @findClicked="findClicked" />
    <div class="mt10" style="width: 100%; background-color: white">
      <el-card shadow="never" :body-style="{ padding: '5px 10px 5px' }">
        <h1 class="f16">员工资料</h1>
        <Table :tableHeader="tableHeader" :tableData="tableData" selection class="mt10" @selectList="selectTableList" />
      </el-card>
      <el-card shadow="never" :body-style="{ padding: '5px' }">
        <PageModule :PageData="{ total, buttonS: true }" @pageSizeChange="handleSizeChange" @pageChange="handleCurrentChange" />
      </el-card>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import LoginWork from '@/utils/LoginWork'
import JMessage from '@/utils/JMessage'
export default defineComponent({
  name: 'EmployeeBarcode'
})
</script>
<script lang="ts" setup>
import { i18n, Jzhcn } from '@/i18n'
import { selectList, selectSomeList } from '@/plugins/mixin'
import service from '@/utils/request'
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import { debounce } from 'lodash'
import { onMounted, watch } from 'vue'
import qrcode from 'qrcode'
onMounted(() => {
  const style = document.createElement('style')
  style.innerHTML = `
    @media print {
      .page-break {
        break-after: page;
      }
    }
  `
  document.head.appendChild(style)
})
const formList = ref<any>([
  {
    type: 'select',
    selectValue: '',
    selectP: '针车组别',
    selectLabel: '',
    selectOptions: []
  },
  {
    type: 'input',
    inputPlaceholder: '请输入工号',
    inputValue: ''
  },
  {
    type: 'input',
    inputPlaceholder: '请输入姓名',
    inputValue: ''
  },
  {
    type: 'button',
    checkboxLabel: '置空',
    bgColor: '#1890FF'
  },
  {
    type: 'button',
    checkboxLabel: '新增'
  },
  {
    type: 'button',
    checkboxLabel: '打印条码'
  },
  {
    type: 'select',
    selectValue: '',
    selectP: '针车组别 ',
    selectLabel: '',
    selectOptions: []
  },
  {
    type: 'button',
    checkboxLabel: '调整组别'
  },
  {
    type: 'button',
    checkboxLabel: '删除打勾员工'
  }
])

const tableHeader = ref([
  {
    label: '针车组别',
    prop: 'line'
  },
  {
    label: '工号',
    prop: 'workerId'
  },
  {
    backgroundColor: true,
    label: '姓名',
    prop: 'workerName'
  }
])
// 表一模块
// 表一按钮
const findClicked = async (content: string) => {
  if (content === '置空') {
    formList.value.forEach((item: any) => {
      item.inputValue = ''
      item.selectValue = ''
      item.dateValue = ''
    })
  }
  if (content === '新增') {
    const zb = formList.value.find(
      (item: any) => item.selectP && Jzhcn.Find[item.selectP.split('.')[1] as keyof typeof Jzhcn.Find] === '针车组别'
    )?.selectValue
    const userId = formList.value.find(
      (item: any) => item.inputPlaceholder && Jzhcn.Find[item.inputPlaceholder.split('.')[1] as keyof typeof Jzhcn.Find] === '请输入工号'
    )?.inputValue
    const name = formList.value.find(
      (item: any) => item.inputPlaceholder && Jzhcn.Find[item.inputPlaceholder.split('.')[1] as keyof typeof Jzhcn.Find] === '请输入姓名'
    )?.inputValue
    if (!zb || !userId || !name) {
      JMessage.error('请输入针车组别，工号，姓名')
      return
    }
    const res = await LoginWork.put<any, any>('/sdUser/stitch/insertWorker', {
      line: zb,
      workerId: userId,
      workerName: name
    })
    if (res.code === 200) {
      JMessage.success(res.message)
      getTableList()
    } else {
      JMessage.error(res.message)
    }
  }
  if (content === '删除打勾员工') {
    const res = await LoginWork.post<any, any>(
      '/sdUser/stitch/deleteStitchWorkersByIds',
      selectedLists.value.map((item: any) => item.workerId)
    )
    if (res.code === 200) {
      JMessage.success(res.message)
      getTableList()
    } else {
      JMessage.error(res.message)
    }
  }
  if (content === '调整组别') {
    const res = await LoginWork.post<any, any>(
      `/sdUser/stitch/updateStitchWorker?line=${formList.value[6].selectValue}`,
      selectedLists.value.map((item: any) => item.workerId)
    )
    if (res.code === 200) {
      JMessage.success(res.message)
      getTableList()
    } else {
      JMessage.error(res.message)
    }
  }
  if (content === '打印条码') {
    const printHTML = (document.querySelector('#report') as any).innerHTML
    window.document.body.innerHTML = printHTML
    window.print() // 调用浏览器的打印功能打印指定区域
    window.location.reload() // 打印完成后重新加载页面
  }
}
const printArr = ref([]) as any
const tableData = ref([])
const isLoading = ref(true)

// 分页器
const currentPage = ref(1)
const pageSize = ref(40)
const total = ref(0)
const handleSizeChange = (val: number) => {
  pageSize.value = val
  getTableList()
}
const handleCurrentChange = (val: number) => {
  currentPage.value = val
  getTableList()
}
// 获取表数据
const getTableList = debounce(async () => {
  isLoading.value = true
  let tableDataList = await service.post<any, any>('/sdUser/stitch/workerList', {
    line: formList.value.find((item: any) => item.selectP && Jzhcn.Find[item.selectP.split('.')[1] as keyof typeof Jzhcn.Find] === '针车组别')
      ?.selectValue,
    workerId: formList.value.find(
      (item: any) => item.inputPlaceholder && Jzhcn.Find[item.inputPlaceholder.split('.')[1] as keyof typeof Jzhcn.Find] === '请输入工号'
    )?.inputValue,
    workerName: formList.value.find(
      (item: any) => item.inputPlaceholder && Jzhcn.Find[item.inputPlaceholder.split('.')[1] as keyof typeof Jzhcn.Find] === '请输入姓名'
    )?.inputValue,
    pageNum: currentPage.value,
    pageSize: pageSize.value
  })
  isLoading.value = false
  tableData.value = tableDataList.list
  total.value = tableDataList.page
  // currentRow()
}, 500)
onMounted(() => {
  getTableList()
})
watch(
  () =>
    formList.value.map((item: any) => {
      item.selectValue, item.inputValue, item.dateValue, item.checked
    }),
  () => {
    getTableList()
  }
)

const selectedLists = ref([])
const selectTableList = (selectedList: any) => {
  selectedLists.value = selectedList
  printArr.value = selectedLists.value.map((item: any) => {
    let qrCodeData = item.workerId
    qrcode.toDataURL(qrCodeData, (err: any, url: any) => {
      if (err) {
        JMessage.error(err)
      } else {
        qrCodeData = url
      }
    })
    return {
      img: qrCodeData,
      line: item.line,
      workerName: item.workerName,
      workerId: item.workerId
    }
  })
}

// 下拉框数据初始化
const getSelectList = async () => {
  // selectSomeList(formList, () => service.get('/back/getStitchLine'))
  const res = await service.get<String[], String[]>('/back/getStitchLine')
  res.forEach((item: any, index: any) => {
    if (item === null || item === '') return
    formList.value[6].selectOptions.push({
      optionKey: index,
      optionValue: item,
      optionLabel: item
    })
    formList.value[0].selectOptions.push({
      optionKey: index,
      optionValue: item,
      optionLabel: item
    })
  })
}
onMounted(() => {
  getSelectList()
})
</script>

<style lang="less" scoped></style>
<style media="print">
.List {
  font-size: 16px;
  margin-top: 6mm;
  display: flex;
  justify-content: space-evenly;
}

.left {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
}

.right {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: start;
}

img {
  width: 100px;
  height: 100px;
}
</style>
<style type="text/css" media="print">
@media print {
  html,
  body {
    margin: 0;
    padding: 0;
    width: 60mm;
    height: 39mm;
  }

  @page {
    margin: 1mm;
    size: landscape;
  }
}
</style>
